<template>
  <el-row class="box">
    <el-col :span="23" style="display: flex;justify-content: space-between;">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="app-breadcrumb" separator="-">
        <span v-for="(item, index) in name" :key="index" v-if="key == item.name" @click="back" class="back">
          <el-button size="mini" style="margin-right: 10px" class="pubBtn3" type="button">
            返回</el-button>
        </span>
        <el-breadcrumb-item v-if="levelList[0].path != homeUrl" :to="{ path: homeUrl }">首页</el-breadcrumb-item>

        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
            <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1
              " class="item no-redirect">{{ item.meta.title }}</span>
            <a v-else @click.prevent="handleLink(item)">{{
              item.meta.title
            }}</a>
          </el-breadcrumb-item>
        </transition-group>
        <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item> -->
      </el-breadcrumb>

      <div style="width:300px;display: flex;" v-if="key == '/work'">
        <el-autocomplete ref="selectRef" clearable style="width: 100%;" class="inline-input" v-model="company" size="mini"
          :fetch-suggestions="querySearch" placeholder="请输入公司名称检索走访记录" :trigger-on-focus="false" @select="handleSelect">
          <!-- @select="handleSelect"> -->
          <template slot-scope="{ item }">
            <div style="display: flex;justify-content: space-between;">
              <div class="name">{{ item.company_name }}</div>
              <div class="name">{{ item.num }}</div>
            </div>
          </template>
        </el-autocomplete>
        <div style="display: flex; align-items: center;">
          <el-button :loading="buttonType" size="mini"
            style="margin-left: 10px; font-size: 14px;height: 28px;margin-top: 4px;" type="primary" plain
            @click="handleSearchTYC">搜索</el-button>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import pathToRegexp from "path-to-regexp";
import { seachCompany } from '@/api/newuser'
import { visitDetailtwo } from '@/api/newuser.js'

export default {
  data() {
    return {
      homeUrl: "/work",
      levelList: null,
      company: "",
      name: [
        { name: "/docking" },
        { name: "/detail" },
        { name: "/power" },
        { name: "/instructions" },
        { name: "/drawings" },
        { name: "/fullText" },
        { name: "/kindred" },
        { name: "/law" },
        { name: "/AdvancedSearch" },
        { name: "/userCenter" },
        { name: "/patentDetails" },
        { name: "/cutDetails" },
        { name: "/centerDetail" },
        { name: "/report" },
        { name: "/newsDetails" },
        { name: "/compdetail" },
        { name: "/costdetails" },
        // { name: "/newhome" },
        // { name: "/work" },
        { name: "/workPct" },
        { name: "/workWarning" },
        { name: "/workTobear" },
        { name: "/workCompany" },
        { name: "/workFollow" },
        { name: "/workVisit" },
        { name: "/workWaitvisit" },
        { name: "/workWaitvisit2" },
        { name: "/workWaitvisit3" },
        { name: "/workEnterprisevisit" },
        { name: "/workCalendar" },
        { name: "/datapage" },
        // { name: "/honor" },
        { name: "/workVisit/details" },

      ],
      seachCompanyList: [],
      buttonType: false,
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  computed: {
    key() {
      return this.$route.path;
    },
  },
  created() {
    this.getBreadcrumb();
    let com_id = this.$store.state.user.com_id;
    // if (com_id == 0) {
    //   this.homeUrl = '/newhome'
    // } else {
    //   this.homeUrl = '/work'
    // }
  },
  methods: {
    handleSearchTYC() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (this.company == '') {
        this.$message({
          message: '请输入公司名称',
          type: 'warning'
        });
        return
      }
      this.buttonType = true
      this.timer = setTimeout(() => {
        seachCompany({ keword: this.company }).then(res => {
          this.buttonType = false
          this.seachCompanyList = res.slice(0, 1000)
          var restaurants = this.seachCompanyList;
          this.$refs["selectRef"].$data.suggestions = restaurants;
          this.$refs.selectRef.focus();
        })
      }, 500);
    },
    handleSelect(item) {
      // console.log(item);
      this.company = item.company_name ? item.company_name : item

      this.$router.push({
        path: '/workEnterprisevisit',
        query: {
          company_id: item.id ? item.id : '',
          company_name: item.company_name,
        }
      })
      this.company = ''

      //判断是否有走访记录
      // visitDetailtwo({
      //   company_id: item.id
      // }).then(res => {
      //   this.company = ''
      //   // console.log(res);
      //   // console.log(item, '26666');
      //   if (res.list.length == 0) {
      //     this.$router.push(
      //       {
      //         path: '/addWaitvisit',
      //         query: {
      //           company_name: item.company,
      //           company_id: item.id,
      //         }
      //       }
      //     )
      //   } else {
      //     this.$router.push({
      //       path: '/workEnterprisevisit',
      //       query: {
      //         company_id: item.id,
      //       }
      //     })
      //   }
      // })
    },
    querySearch(queryString, cb) {
      cb([]);
      // if (this.seachCompanyList.length == 0) {
      // } else {
      //   var restaurants = this.seachCompanyList;
      //   var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      //   // 调用 callback 返回建议列表的数据
      //   cb(results);
      // }
    },
    createFilter(queryString) {
      return (restaurant) => {
        console.log(restaurant);
        return (restaurant.company_name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      // console.log(this.$route, 13213)
      const first = matched[0];
      // if (!this.isDashboard(first)) {
      //   matched = [{ path: '/', meta: { title: '首页' }}].concat(matched)
      // }
      this.levelList = matched.filter(
        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
      );
    },
    isDashboard(route) {
      const name = route && route.name;
      if (!name) {
        return false;
      }
      return (
        name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase()
      );
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route;
      var toPath = pathToRegexp.compile(path);
      return toPath(params);
    },
    handleLink(item) {
      const { redirect, path } = item;
      if (redirect) {
        this.$router.push(redirect);
        return;
      }
      this.$router.push(this.pathCompile(path));
    },
    back() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  position: absolute;
}

.pubBtn3 {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.pubBtn3:hover {
  background-color: #3377ff;
  color: #fff;
}

.box {
  display: flex;
  justify-content: center;
  background-color: #fff;
}

.el-row {
  width: 100%;
}

.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}

.back {
  float: left;
}

.back:hover {
  color: #409eff;
  cursor: pointer;
}
</style>
